import React from "react";
import {Button, Card, Empty, Grid, InfiniteScroll, List, SearchBar, Tag, Toast} from 'antd-mobile'
import './MainPage.css'
import moment from "moment";
import cookie from "_react-cookies@0.1.1@react-cookies";
export default class CheckSign extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            phone:"",
            startMark:1,
            sign:[],
            hasMore:true,
            signListLength:'',
            }
    }

    test = (planNumber) =>{
        console.log(planNumber)
    }

    getData = () => {
        const newStartMark = this.state.startMark + 10;
        const url ='http://htjoa.nrnet.cn/dc14/construct/sign?phone='+this.state.phone+'&startMark='+this.state.startMark;
        //const url ='http://htjoa.nrnet.cn/dc14/construct/sign?phone='+this.state.phone+'&startMark='+newStartMark;
        fetch(url,{method:"GET"
        })
            .then(res=>res.json()).then(result=> {
            if (result["code"] == "200") {
                this.setState({startMark:newStartMark})
                this.setState({sign:[...this.state.sign,...result["sign"]]})
                console.log(result)
            }
        })

                // console.log(this.state.sign)
        //如果数字大于100条则显示不在加载更多
        if (this.state.sign.length>100 || this.state.signListLength < this.state.startMark){
            this.setState({hasMore:false})
        }
    }
    loadMore = () => {
        console.log("加载更多")
    }

    getSignListLength = () =>{
        const url ='http://htjoa.nrnet.cn/dc14/construct/length?phone='+cookie.load("phone");
        fetch(url,{method:"GET"
        })
            .then(res=>res.json()).then(result=> {
            if (result["code"] == "200") {
                this.setState({signListLength:result["number"]})
                console.log(result)
                return result
            }
        })

    }

    getNewSignByPhoneAndStartMark= () =>{
        const url ='http://htjoa.nrnet.cn/dc14/construct/sign?phone='+cookie.load("phone")+'&startMark='+this.state.startMark;
        fetch(url,{method:"GET"
        })
            .then(res=>res.json()).then(result=> {
            if (result["code"] == "200") {
                this.setState({sign:result["sign"]})
                console.log(result)
                return result
            }
        })
    }

    componentDidMount() {
        document.title='查看打卡'
        this.setState({phone:cookie.load("phone")})
        this.getNewSignByPhoneAndStartMark()
        this.getSignListLength()


    }

    render() {
        const {sign} = this.state;
        // const signList =  Array.from(sign);




        return (
            <div style={{background: "#1677ff"}}>
                <div style={{padding: '10px',}}>

                    <Card title='打卡记录:'>
                        {/*<SearchBar*/}
                        {/*    placeholder='按计划号查找'*/}
                        {/*    showCancelButton*/}
                        {/*    onSearch={val => {*/}
                        {/*        Toast.show(`你搜索了：${val}`)*/}
                        {/*    }}*/}
                        {/*    onFocus={() => {*/}
                        {/*        Toast.show('获得焦点')*/}
                        {/*    }}*/}
                        {/*    onBlur={() => {*/}
                        {/*        Toast.show('失去焦点')*/}
                        {/*    }}*/}
                        {/*    onClear={() => {*/}
                        {/*        Toast.show('清空内容')*/}
                        {/*    }}*/}
                        {/*    onCancel={() => {*/}
                        {/*        Toast.show('取消搜索')*/}
                        {/*    }}*/}
                        {/*/>*/}
                        <List >
                            {
                                sign.map((element,index)=>{
                                    return (<List.Item key={index} value={element}>
                                        <Card>
                                            <Grid columns={5} gap={8}>
                                                <Grid.Item span={4}>
                                                    计划编号： {element["planNumber"]}
                                                </Grid.Item>
                                                <Grid.Item>
                                                    {
                                                        element["inOrOut"]=="in"?(<Tag color='primary' fill='outline'>签到</Tag>)
                                                            :(<Tag color='default' fill='outline'>签退</Tag>)
                                                    }


                                                </Grid.Item>
                                                <Grid.Item span={5}>
                                                    时间： {moment(element["addtime"]).format("YYYY-MM-DD HH:mm:ss")}
                                                </Grid.Item>
                                            </Grid>
                                        </Card>
                                    </List.Item>)
                                })
                            }
                        </List>
                        {this.state.hasMore?(
                            <Button  onClick={this.getData} block color='primary' size='large' >加载更多</Button>)
                            :(<Button block disabled >
                            暂无更多
                        </Button>)}

                    </Card>
                </div>
            </div>

        );
    }
}